<template>
  <div class="top-show">
    <div class="welcome">
      不念过往，不负当下，不畏将来
    </div>
    <div class="clock">
      {{nowTime}}
    </div>
    <img src="../../../assets/images/bgc1.jpg" alt="">
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
const nowTime = ref(new Date().toLocaleTimeString())
let timer = null
// 挂载时逻辑
onMounted(() => {
  timer = setInterval(() => {
    nowTime.value = new Date().toLocaleTimeString()
  }, 1000)
})

// 卸载时逻辑
onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style scoped>
.top-show {
  position: relative;
  z-index: 2;
  left: 0;
  right: 0;
  display: flex;
  height: 400px;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  font-size: 20px;
}
.welcome {
  position: absolute;
  left: 20px;
  top: 30px;
  color: rgb(238, 226, 179);
}
.clock {
  position: absolute;
  right: 20px;
  top: 30px;
  color: rgb(248, 237, 191);
}
.top-show img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
